<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../assert/css/font.css" th:href="@{/assert/css/font.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css" th:href="@{/assert/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/plugin/chosen/chosen.css" th:href="@{/assert/css/plugin/chosen/chosen.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-table.css" th:href="@{/assert/css/bootstrap-table.css}"/>
    <link href="../../../assert/css/animate.min.css" rel="stylesheet" th:href="@{/assert/css/animate.min.css}">
    <link href="../../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/toastr/toastr.min.css}">
    <link href="../../../assert/css/plugin/jsTree/style.min.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/jsTree/style.min.css}">
    <link href="../../../assert/css/loaders.css" rel="stylesheet"
          th:href="@{/assert/css/loaders.css}">
    <link rel="stylesheet" href="../../../assert/css/index.css" th:href="@{/assert/css/index.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"/>
</head>
<body>
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="tools_bar">
            <div class="pull-left">
                <a href="#" class="btn btn-default active" id="refresh"><i class="fa fa-refresh"></i> 刷新</a>
            </div>
        </div>
        <div class="table_msg">
            <ul>
                <li>规则名称: <span id="ruleName" th:text="${ruleName}"></span></li>
            </ul>
        </div>
        <table id="myTable"></table>
    </div>
</div>
<div th:text="${workId}" id="workId1" class="hidden"></div>
<div th:text="${seatId}" id="seatId1" class="hidden"></div>
<div th:text="${callStartTime}" id="callStartTime1" class="hidden"></div>
<div th:text="${callEndTime}" id="callEndTime1" class="hidden"></div>
<div th:text="${ruleId}" id="ruleId1" class="hidden"></div>
<a id="basePath" th:href="@{/}"></a>
<script src="../../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/bootstrap.min.js" th:src="@{/assert/js/bootstrap.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script src="../../../assert/js/plugin/toastr/toastr.min.js"
        th:src="@{/assert/js/plugin/toastr/toastr.min.js}"></script>
<script src="../../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/jquery-ui.min.js" th:src="@{/assert/js/jquery-ui.min.js}"></script>
<script src="../../../assert/js/plugin/layer/laydate/laydate.js"
        th:src="@{/assert/js/plugin/layer/laydate/laydate.js}"></script>
<script src="../../../assert/js/changeTime.js" th:src="@{/assert/js/changeTime.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/jsTree/jstree.min.js"
        th:src="@{/assert/js/plugin/jsTree/jstree.min.js}"></script>
<script src="../../../assert/js/plugin/chosen/chosen.jquery.js" th:src="@{/assert/js/plugin/chosen/chosen.jquery.js}"></script>
<script src="../../../assert/js/contabs.min.js" th:src="@{/assert/js/contabs.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/common.js"></script>
<script>
    //项目名称
    var basePath = $("#basePath").attr("href");
    var TableInit = function () {
        var oTableInit = new Object();
        var url = basePath + "/rest/my-accessment/get-data-list-mes";
        //初始化Table
        oTableInit.Init = function () {
            $('#myTable').bootstrapTable({
                url: url,         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                sortable: true,                     //是否启用排序
                sortName: "serialNumber", //排序方式
                sortOrder: "asc",                   //排序方式
                pagination: true,                   //是否显示分页（*）
                queryParams: oTableInit.queryParams,//传递参数（*）
                responseHandler: function (res) {
                    if (res.code != 0) {
                        toastrCog.error(res.msg, 3000);
                    }
                    return {
                        "total": res.count,//总页数
                        "rows": res.data   //数据
                    };
                },
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: false,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,
                cellStyle: {
                    css: {"background-color": "#fff"}
                },//是否显示父子表
                onDblClickRow: function (row,elem) {
                    elem.find(".J_menuItem").click();
                },
                columns: [
//                    {
//                        checkbox: true, // 显示一个勾选框
//                        align: 'center' // 居中显示
//                    },
                    {
                        align: "center",
                        halign: "center",
                        title: '序号',//标题  可不加
                        width: 60,
                        formatter: function (value, row, index) {
                            var getOptions = $("#myTable").bootstrapTable('getOptions');
                            var pagenum = getOptions.pageNumber;
                            var pagesize = getOptions.pageSize;
                            var st = (pagenum - 1) * pagesize;
                            return (st + index + 1) + "";
                        }
                    },
                    {
                        align: "left",
                        halign: "center",
                        field: 'serialNumber',
                        title: '录音流水号',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var workId=$("#workId1").text();
                            var callStartTime=row.callStartTime;
                            var callEndTime=row.callEndTime;
                            var proStatus=row.proStatus;
                            var seatGroup=row.seatGroup;
                            var seatId=row.seatId;
                            var serialNumber=row.serialNumber;
                            var customerNumber=row.customerNum;
                            var params={
                                workId:workId,
                                callStartTime:callStartTime,
                                callEndTime:callEndTime,
                                proStatus:proStatus,
                                seatId:seatId,
                                serialNumber:serialNumber,
                                seatGroup:seatGroup
                            };
                            var href=basePath + "/rest/page/audioDetail?"+$.param(params);
                            return '<a href="'+href+'" title="查看详情"  class="J_menuItem" data-index="'+serialNumber+'任务语音" data-txt="'+serialNumber+'-详情" data-href="/rest/page/audioDetail">'+value+'</a>'

                        },
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'proStatus',
                        title: '质检状态',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var color="#000";
                            var res="";
                            if(value==0||value==7||value==10||value==17){
                                color="#e8907d";
                                res="质检完成";
                            }else  if(value==20||value==27){
                                color="#6eace8";
                                res="已申诉";
                            }else  if(value==30||value==37||value==40){
                                color="#1d9a70";
                                res="复检完成";
                            }
                            return "<span style='color:"+color+"'>"+res+"</span>";
                        }
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'proFlag',
                        title: '质检属性',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return bs.changeState(value, tools.testTypeArr);
                        }
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'customerNum',
                        title: '客户号码',
                        sortable: true,
                    }, {
                        align: "center",
                        halign: "center",
                        field: 'proPhoneNum',
                        title: '受理号码',
                        sortable: true,
                    }, {
                        align: "center",
                        halign: "center",
                        field: 'seatGroup',
                        title: '坐席班组',
                        sortable: true

                    }, {
                        align: "center",
                        halign: "center",
                        field: 'seatId',
                        title: '坐席工号',
                        sortable: true,
//                        formatter:function(value, row, index){
//                            return tools.getNameInId(value);
//                        }
                    }, {
                        align: "center",
                        halign: "center",
                        field: 'proUserId',
                        title: '质检员'
                    }, {
                        align: "center",
                        halign: "center",
                        field: 'isEachRecord',
                        title: '通话类型',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var str="";
                            if(value=="0"){
                                str="呼入"
                            }else{
                                str="呼出"
                            }
                            return str;
                        }

                    },{
                        align: "right",
                        halign: "center",
                        field: 'holdDuration',
                        title: '通话时长(秒)',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return '<span style="padding-right:20px;">'+value+'</span>';
                        }
                    },{
                        align: "center",
                        halign: "center",
                        field: 'callStartTime',
                        title: '通话开始时间',
                        sortable: true,
                    },{
                        align: "center",
                        halign: "center",
                        field: 'callEndTime',
                        title: '通话结束时间',
                        sortable: true,
                    },{
                        align: "center",
                        halign: "center",
                        field: 'workScore',
                        title: '分值',
                        sortable: true,
                    }
                ],
                onLoadSuccess: function (data) {  //加载成功时执行
                    resize.me();
                    if (!data.total||data.total == 0) {
                        $(".no-records-found").find("td").html('<img src="../../../assert/image/nodata.png" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                    }
                },
                onLoadError: function () {  //加载失败时执行
//                    toastr.error('加载数据失败！');
                    $(".no-records-found").find("td").html('<img src="../../../assert/image/nodata.png" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                },
                formatLoadingMessage: function () {
                    return '<div class="loaded">' +
                        '<div class="loader">' +
                        '<div class="loader-inner line-scale-pulse-out">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'+
                        '<div>请稍等，数据正在加载中...</div>';
                }
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageNum: params.offset,   //页面大小
                pageSize: params.limit,
                sortName: this.sortName,
                sortOrder: this.sortOrder,
                workId: $("#workId1").text(),
                callStartTime: $("#callStartTime1").text(),
                callEndTime: $("#callEndTime1").text(),
                seatId: $("#seatId1").text(),
                ruleId: $("#ruleId1").text()
            };
            return temp;
        };
        return oTableInit;
    };
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
            $(".ibox").width(winW - 20);
            $(".ibox").height(winH - 20);
            $(".fixed-table-body").css("maxHeight",(winH -$(".tools_bar").height()-60-60)+"px");
        }
    };
    var tools={
        testTypeArr:[],
        seatIdArr:[],
        stateArr:[],
        init:function(){
            tools.refresh();
            tools.getSeatId("","");
            tools.getProstatus();
            tools.getProFlag();
        },
        tableRefresh: function () {
            $("#myTable").bootstrapTable('refreshOptions', {pageNumber:1});
            $("#myTable").bootstrapTable('refresh');
        },
        refresh:function(){
            $("#refresh").on("click",function(){
                $("#myTable").bootstrapTable('refresh');
            })
        },
        getProstatus:function(){
            var dataArr = bs.getStatus("speech_work_status");
            Object.assign(tools.stateArr,dataArr);//es6复制数组的方法
        },
        getProFlag: function () {
            var dataArr = bs.getStatus("pro_flag");
            Object.assign(tools.testTypeArr,dataArr);//es6复制数组的方法
        },
        getSeatId:function(areaId,seatGroupId){
            $.ajax({
                type: "post",
                url: basePath + "/rest/users/selectAccountByAreaGroupId",
                dataType: "json",
                data:{
                    areaId:areaId,
                    seatGroupId:seatGroupId
                },
                success: function (data) {
                    tools.seatIdArr=[];
                    if (data.length> 0) {
                        var dataArr = data;
                        tools.seatIdArr =dataArr;
                    }
                }
            })
        },
        getNameInId: function (id) {//根据id称获取name
            var name = "";
            for (var i = 0; i < tools.seatIdArr.length; i++) {
                if (tools.seatIdArr[i].id == id) {
                    name = tools.seatIdArr[i].account;
                    break;
                }
            }
            return name;
        },
    };
    $(function () {
        resize.init();
        tools.init();
        var oTable = new TableInit();
        oTable.Init();


    })
</script>
</body>
</body>
</html>